<template>
  <div class="duty-manage table-page">
    <SideBar v-model="currSideBar" :tabList="tabList" />
    <FoldCard v-if="isDutyIssued" ref="foldCardRef" :title="currSideBar">
      <IssuedAsideList @clickItem="onClickItem" />
    </FoldCard>
    <IssuedTableList v-if="showTable" ref="tableListRef" :titlePrefix="currSideBar" :style="isDutyIssued ? tableListMarginStyle : {}" />
  </div>
</template>

<script setup>
import { ref, computed, useTemplateRef, onMounted } from 'vue'
import { useTableListMarginStyle } from '@/hooks/useTableListMarginStyle'
import SideBar from '@/components/SideBar/index.vue'
import IssuedAsideList from './components/IssuedAsideList.vue'
import IssuedTableList from './components/IssuedTableList.vue'
import { SIDE_BAR_MENU } from './config'

onMounted(() => {
  showTable.value = true;
})

const tabList = ref(SIDE_BAR_MENU);
const currSideBar = ref(SIDE_BAR_MENU[0])
const foldCardRef = useTemplateRef('foldCardRef')
const tableListRef = useTemplateRef('tableListRef')
const tableListMarginStyle = useTableListMarginStyle(foldCardRef);
const isDutyIssued = computed(() => currSideBar.value === '任务下发')
const showTable = ref(false);

const onClickItem = item => {
  if (!tableListRef.value) return;
  tableListRef.value.getData(item);
}
</script>

<style lang="scss" scoped>
@use '@/styles/components/tablePage.scss';
</style>